<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BasePage 功能测试页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .section {
            margin-bottom: 30px;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .section h2 {
            color: #333;
            border-bottom: 2px solid #007bff;
            padding-bottom: 10px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input, select, textarea {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        button {
            background-color: #007bff;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 10px;
            margin-bottom: 10px;
        }
        button:hover {
            background-color: #0056b3;
        }
        .cancel-btn {
            background-color: #6c757d;
        }
        .cancel-btn:hover {
            background-color: #545b62;
        }
        .success-msg {
            color: green;
            background-color: #d4edda;
            padding: 10px;
            border-radius: 4px;
            margin: 10px 0;
            display: none;
        }
        .error-msg {
            color: red;
            background-color: #f8d7da;
            padding: 10px;
            border-radius: 4px;
            margin: 10px 0;
            display: none;
        }
        .loading-spinner {
            display: none;
            text-align: center;
            padding: 20px;
        }
        .spinner {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #3498db;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 2s linear infinite;
            margin: 0 auto;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        .drag-drop-area {
            border: 2px dashed #ccc;
            padding: 20px;
            text-align: center;
            margin: 10px 0;
        }
        .drag-source {
            background-color: #007bff;
            color: white;
            padding: 10px;
            margin: 10px;
            cursor: move;
            display: inline-block;
            border-radius: 4px;
        }
        .drop-target {
            background-color: #f8f9fa;
            border: 2px dashed #007bff;
            padding: 20px;
            margin: 10px;
            min-height: 50px;
            text-align: center;
            border-radius: 4px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 10px 0;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
        .hidden-element {
            display: none;
            background-color: #fff3cd;
            padding: 10px;
            border-radius: 4px;
            margin: 10px 0;
        }
        .main-menu {
            background-color: #343a40;
            padding: 10px;
            border-radius: 4px;
        }
        .main-menu a {
            color: white;
            text-decoration: none;
            padding: 10px 15px;
            display: inline-block;
        }
        .main-menu a:hover {
            background-color: #495057;
            border-radius: 4px;
        }
        .submenu {
            background-color: #495057;
            display: none;
            padding: 10px;
            margin-top: 5px;
            border-radius: 4px;
        }
        .submenu li {
            list-style: none;
            padding: 5px 0;
        }
        .submenu a {
            color: white;
            text-decoration: none;
        }
        .alert-dialog {
            background-color: #f8d7da;
            border: 1px solid #f5c6cb;
            color: #721c24;
            padding: 15px;
            border-radius: 4px;
            margin: 10px 0;
            display: none;
        }
        .file-upload-area {
            border: 2px dashed #007bff;
            padding: 20px;
            text-align: center;
            border-radius: 4px;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>BasePage 功能测试页面</h1>
        <p>这是一个用于测试 BasePage 各种功能的综合测试页面。</p>

        <!-- 基本表单测试区域 -->
        <div class="section">
            <h2>基本表单测试</h2>
            <form id="test-form">
                <div class="form-group">
                    <label for="username">用户名:</label>
                    <input type="text" id="username" name="username" placeholder="请输入用户名">
                </div>
                <div class="form-group">
                    <label for="password">密码:</label>
                    <input type="password" id="password" name="password" placeholder="请输入密码">
                </div>
                <div class="form-group">
                    <label for="email">邮箱:</label>
                    <input type="email" id="email" name="email" placeholder="请输入邮箱">
                </div>
                <div class="form-group">
                    <label for="country">国家:</label>
                    <select id="country" name="country">
                        <option value="">请选择国家</option>
                        <option value="china">中国</option>
                        <option value="usa">美国</option>
                        <option value="japan">日本</option>
                        <option value="korea">韩国</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="city">城市:</label>
                    <select id="city" name="city">
                        <option value="">请选择城市</option>
                        <option value="beijing">北京</option>
                        <option value="shanghai">上海</option>
                        <option value="guangzhou">广州</option>
                        <option value="shenzhen">深圳</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>性别:</label>
                    <input type="radio" id="male" name="gender" value="male">
                    <label for="male" style="display: inline; margin-left: 5px;">男</label>
                    <input type="radio" id="female" name="gender" value="female" style="margin-left: 20px;">
                    <label for="female" style="display: inline; margin-left: 5px;">女</label>
                </div>
                <div class="form-group">
                    <input type="checkbox" id="agree" name="agree">
                    <label for="agree" style="display: inline; margin-left: 5px;">我同意服务条款</label>
                </div>
                <button type="submit" id="login-btn">登录</button>
                <button type="button" class="cancel-btn" id="cancel-btn">取消</button>
            </form>
        </div>

        <!-- 消息显示区域 -->
        <div class="section">
            <h2>消息显示测试</h2>
            <div id="welcome-msg">欢迎使用 BasePage 功能测试页面！</div>
            <div class="success-msg" id="success-msg">操作成功！</div>
            <div class="error-msg" id="error-msg">操作失败，请重试！</div>
            <button onclick="showSuccess()">显示成功消息</button>
            <button onclick="showError()">显示错误消息</button>
            <button onclick="hideMessages()">隐藏消息</button>
        </div>

        <!-- 加载状态测试 -->
        <div class="section">
            <h2>加载状态测试</h2>
            <div class="loading-spinner" id="loading-spinner">
                <div class="spinner"></div>
                <p>加载中...</p>
            </div>
            <button onclick="showLoading()">显示加载状态</button>
            <button onclick="hideLoading()">隐藏加载状态</button>
        </div>

        <!-- 拖拽测试区域 -->
        <div class="section">
            <h2>拖拽功能测试</h2>
            <div class="drag-source" id="drag-source" draggable="true">拖拽我</div>
            <div class="drop-target" id="drop-target">拖拽目标区域</div>
        </div>

        <!-- 表格测试区域 -->
        <div class="section">
            <h2>表格测试</h2>
            <table id="data-table">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>姓名</th>
                        <th>年龄</th>
                        <th>城市</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>张三</td>
                        <td>25</td>
                        <td>北京</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>李四</td>
                        <td>30</td>
                        <td>上海</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>王五</td>
                        <td>28</td>
                        <td>广州</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- 菜单测试区域 -->
        <div class="section">
            <h2>菜单测试</h2>
            <div class="main-menu" id="main-menu">
                <a href="#" onmouseover="showSubmenu()" onmouseout="hideSubmenu()">主菜单</a>
                <ul class="submenu" id="submenu">
                    <li><a href="#">子菜单项1</a></li>
                    <li><a href="#">子菜单项2</a></li>
                    <li><a href="#">子菜单项3</a></li>
                </ul>
            </div>
        </div>

        <!-- 文件上传测试 -->
        <div class="section">
            <h2>文件上传测试</h2>
            <div class="file-upload-area">
                <input type="file" id="file-upload" name="file-upload">
                <p>选择文件上传</p>
            </div>
        </div>

        <!-- 隐藏/显示元素测试 -->
        <div class="section">
            <h2>元素显示/隐藏测试</h2>
            <div class="hidden-element" id="hidden-element">
                这是一个可以显示/隐藏的元素
            </div>
            <button id="show-btn" onclick="showElement()">显示元素</button>
            <button id="hide-btn" onclick="hideElement()">隐藏元素</button>
        </div>

        <!-- 弹窗测试区域 -->
        <div class="section">
            <h2>弹窗测试</h2>
            <div class="alert-dialog" id="alert-dialog">
                这是一个警告对话框
            </div>
            <button onclick="showAlert()">显示警告</button>
            <button onclick="hideAlert()">隐藏警告</button>
            <button onclick="showConfirm()">显示确认框</button>
        </div>

        <!-- 链接测试区域 -->
        <div class="section">
            <h2>链接测试</h2>
            <a href="#" id="forgot-password-link">忘记密码?</a><br><br>
            <a href="#" id="register-link">新用户注册</a>
        </div>
    </div>

    <script>
        // JavaScript 功能函数
        function showSuccess() {
            document.getElementById('success-msg').style.display = 'block';
            document.getElementById('error-msg').style.display = 'none';
        }

        function showError() {
            document.getElementById('error-msg').style.display = 'block';
            document.getElementById('success-msg').style.display = 'none';
        }

        function hideMessages() {
            document.getElementById('success-msg').style.display = 'none';
            document.getElementById('error-msg').style.display = 'none';
        }

        function showLoading() {
            document.getElementById('loading-spinner').style.display = 'block';
        }

        function hideLoading() {
            document.getElementById('loading-spinner').style.display = 'none';
        }

        function showElement() {
            document.getElementById('hidden-element').style.display = 'block';
        }

        function hideElement() {
            document.getElementById('hidden-element').style.display = 'none';
        }

        function showAlert() {
            document.getElementById('alert-dialog').style.display = 'block';
        }

        function hideAlert() {
            document.getElementById('alert-dialog').style.display = 'none';
        }

        function showConfirm() {
            if (confirm('确认要执行此操作吗？')) {
                showSuccess();
            }
        }

        function showSubmenu() {
            document.getElementById('submenu').style.display = 'block';
        }

        function hideSubmenu() {
            setTimeout(function() {
                document.getElementById('submenu').style.display = 'none';
            }, 1000);
        }

        // 拖拽功能
        document.getElementById('drag-source').addEventListener('dragstart', function(e) {
            e.dataTransfer.setData('text/plain', 'drag-source');
        });

        document.getElementById('drop-target').addEventListener('dragover', function(e) {
            e.preventDefault();
        });

        document.getElementById('drop-target').addEventListener('drop', function(e) {
            e.preventDefault();
            this.innerHTML = '拖拽成功！';
            this.style.backgroundColor = '#d4edda';
        });

        // 表单提交处理
        document.getElementById('test-form').addEventListener('submit', function(e) {
            e.preventDefault();
            showLoading();
            setTimeout(function() {
                hideLoading();
                showSuccess();
            }, 2000);
        });

        // 页面加载完成后的初始化
        document.addEventListener('DOMContentLoaded', function() {
            console.log('BasePage 测试页面加载完成');
        });
    </script>
</body>
</html>